<template>
    <div class="SalesNeworder flex bs">
        <el-table :data="neworderList" class="'width font" height="37vh">
            <!-- model下拉 -->
            <el-table-column fixed label="Model" width="200">
                <template v-slot="product_name_pi">
                    <el-select v-model="product_name_pi.row.product_name_pi"
                        @change="() => { chooseDescr(product_name_pi) }" @focus="() => { search('') }" :remote-method="search"
                        remote remote-show-suffix filterable>
                        <el-option v-for="item in modelList" :key="item.label" :label="item.label"
                            :value="`${item.label}|${item.value}`" />
                    </el-select>
                </template>
            </el-table-column>
            <!-- brand下拉 -->
            <el-table-column label="Brand" width="150">
                <template v-slot="Brand_name">
                    <el-select v-model="Brand_name.row.Brand_name" @focus="() => { search1('') }" :remote-method="search1"
                        remote remote-show-suffix filterable>
                        <el-option v-for="item in brandList" :key="item.label" :label="item.label"
                            :value="`${item.label}|${item.value}`" />
                    </el-select>
                </template>
            </el-table-column>
            <!-- 描述与产品名一致，直接绑定产品名 -->
            <el-table-column label="Description" width="150">
                <template v-slot="product_description_pi">
                    <el-input
                        :value="product_description_pi.row.product_name_pi ? product_description_pi.row.product_name_pi.split('|')[0] : ''"
                        placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="Weight" width="80">
                <template v-slot="weight">
                    <el-input v-model="weight.row.weight" />
                </template>
            </el-table-column>
            <el-table-column label="Qty">
                <template v-slot="quantity">
                    <el-input v-model="quantity.row.quantity" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="Price">
                <template v-slot="price">
                    <el-input v-model="price.row.price" placeholder="" />
                </template>
            </el-table-column>
            <el-table-column label="Leading" width="120">
                <template v-slot="leadingtime">
                    <el-select v-model="leadingtime.row.leadingtime" filterable>
                        <el-option v-for="item in leadingList" :key="item" :label="item" :value="item" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="Condition" width="200">
                <template v-slot="product_condition">
                    <el-select v-model="product_condition.row.product_condition" filterable>
                        <el-option v-for="item in conditionList" :key="item.text" :label="item.text" :value="item.text" />
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="Operation" width="120">
                <template v-slot="operation">
                    <el-button type="danger" style="width: 100%;background-color:#6193D2;color: #fff;border: none;"
                        @click="() => { newDeleteProduct(operation) }">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>

const props = defineProps({
    state: Boolean,
    neworderList: Object,
    modelList: Object,
    brandList: Object,
    leadingList: Object,
    conditionList: Object
})
const emits = defineEmits(['getModel', 'getBrand', 'resetproduct', 'resetbrand', 'chooseDescr', 'newDeleteProduct'])


// MODEL的产品方法
const search = (x) => {
    emits('getModel', x)
}
// BRAND品牌方法 
const search1 = (x) => {
    emits('getBrand', x)
}
// MODEL改变时触发
const chooseDescr = (product_name_pi) => {
    emits('chooseDescr', product_name_pi)
}
// 删除产品
const newDeleteProduct = (operation) => {
    emits('newDeleteProduct', operation)
}
</script>

<style lang="less">
.SalesNeworder {
    border-radius: 10px;
    box-sizing: border-box;

    // .el-input__inner {
    //     font-family: 'swis'
    // }

    .width {
        width: 100%;

        padding: 10px;
        border-radius: 10px;
    }

}
</style>